<template>
  <div style="width: 100%; height: 300px">
    <a-card :bordered="false">
      <template>
        <div slot="title" style="display: flex; justify-content: space-between">
          <div>欠费信息</div>
          <div>
            <a-dropdown>
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="USD"> USD</a-menu-item>
                <a-menu-item key="GBP"> GBP </a-menu-item>
                <a-menu-item key="EUR"> EUR </a-menu-item>
                <a-menu-item key="CAD"> CAD </a-menu-item>
              </a-menu>
              <a-button size="small">
                {{ currency }} <a-icon type="down" />
              </a-button>
            </a-dropdown>
          </div>
        </div>
      </template>
      <a-spin :spinning="spinning" tip="Loading...">
        <div style="width: 100%; height: 220px">
          <dv-scroll-board
            v-if="showFlag"
            :config="config"
            style="width: 100%; height: 220px; color: #000"
          />
        </div>
      </a-spin>
    </a-card>
  </div>
</template>

<script>
import { home_accoutBalance } from "@/apis/system/Home/Home";
export default {
  mounted() {
    this.getCostData();
  },
  data() {
    return {
      spinning: false,
      currency: "USD",
      config: {
        headerBGC: "#fff",
        oddRowBGC: "#fff",
        evenRowBGC: "#fff",
        align: ["center", "center", "center", "center", "center"],
        header: ["客户编号", "客户昵称", "联系电话", "公司名称", "欠费金额"],
        data: [],
      },
      showFlag: false,
    };
  },
  methods: {
    handleMenuClick(e) {
      this.currency = e.key;
      this.getCostData(e.key);
    },
    async getCostData(key = "USD") {
      this.showFlag = false;
      this.spinning = true;
      this.config.data = [];
      let { code, responseBody } = await home_accoutBalance(key);
      if (code === "200") {
        if (responseBody.length >= 1) {
          responseBody.forEach((item) => {
            let arr1 = [];
            arr1.push(item.serialNumber);
            arr1.push(item.nickName);
            arr1.push(item.contactPhone);
            arr1.push(item.companyName);
            if (key === "USD") {
              arr1.push(item.balanceUsd);
            } else if (key === "GBP") {
              arr1.push(item.balanceGbp);
            } else if (key === "EUR") {
              arr1.push(item.balanceEur);
            } else if (key === "CAD") {
              arr1.push(item.balanceCad);
            }
            this.config.data.push(arr1);
          });
        }
        this.showFlag = true;
        this.spinning = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>